<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="12rem">
		<el-row type="flex" :gutter="10">
			<el-col :span="24">
				<el-form-item label="首页轮播图" prop="img">
					<el-upload-image v-model="formData.img" :limit="1" :title="title"></el-upload-image>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="轮播图分类" prop="cate_id">
					<el-select v-model="formData.cate_id" style="width: 360px;">
						<el-option v-for="(item,index) in goodsTypeData" :key="index" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<!-- link_type  0 不跳转 1跳转商品详情 2跳转商家主页 -->
				<el-form-item label="轮播图类型" prop="link_type">
					<el-radio-group v-model="formData.link_type" @input="changelist">
						<el-radio :label="0">不跳转</el-radio>
						<el-radio :label="1">跳转商品详情</el-radio>
						<el-radio :label="2">跳转商家主页</el-radio>
						<el-radio :label="3">跳转活动详情</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
			<el-col :span="24" v-if="formData.link_type==1||formData.link_type==2||formData.link_type==3">
				<el-form-item label="轮播图跳转" prop="link_id" v-if="formData.link_type==2">
					<el-select v-model="formData.link_id" filterable style="width: 360px;">
						<el-option v-for="(item,index) in merchlist" :key="index" :label="item.merch_name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="轮播图跳转" prop="link_id" v-if="formData.link_type==1">
					<el-select v-model="formData.link_id" filterable style="width: 360px;">
						<el-option v-for="(item,index) in goodslist" :key="index" :label="item.goods_name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="轮播图跳转" prop="link_id" v-if="formData.link_type==3">
					<el-select v-model="formData.link_id" filterable style="width: 360px;">
						<el-option v-for="(item,index) in activity" :key="index" :label="item.activity_name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" icon="el-icon-check" @click="onConfirm(formData)">确认</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
	import {
		get,
		post
	} from '@/assets/js/http.js'
	export default {
		name: "member-search",
		props: {
			formData: {
				type: Object,
				default: () => {}
			},
		},
		components: {
			"el-upload-image": () => import("@/components/el-upload-image.vue"),
		},
		data() {
			return {
				goodsTypeData: [],
				formRules: {
					img: [{
						required: true,
						message: '请输入',
						trigger: 'change'
					}],
					cate_id: [{
						required: true,
						message: '请选择轮播图分类',
						trigger: 'change'
					}],
					link_type: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
				},
				title: '请上传 690px * 345px 的图片',
				merchlist: [],
				goodslist: [],
				activity:[],
			};
		},
		watch: {
			'formData.link_type'(value, oldValue) {
				this.changelist(this.formData.link_type)
				console.log(this.formData.link_type, 'this.formData.link_type', value, oldValue)
			},
		},
		mounted() {
			this.getCate()
			this.getList()
			this.getgoodsList()
			this.changelist(this.formData.link_type)
		},
		methods: {
			changelist(e) {
				console.log(this.formData, 'this.formData')
				// this.formData.link_id = ''
				if (e == 1) {
					this.getgoodsList()
				}
				if (e == 2) {
					this.getList()
				}
			},
			async getList() {
				this.$loading()
				await get({
					url: '/admin/store.merchant/index',
					params: {
						page: 1,
						limit: 9999,
					}
				}).then(res => {
					this.merchlist = res.list
					console.log(this.merchlist, 'this.merchlist')
					this.$loading().close()
				})
			},
			async getgoodsList() {
				this.$loading()
				await get({
					url: '/admin/shop.goods/allGoodsList',
					params: {
						page: 1,
						limit: 9999,
					}
				}).then(res => {
					this.goodslist = res.list
					console.log(this.goodslist, 'this.goodslist')
					this.$loading().close()
				})
				this.$loading()
				await get({
					url: '/admin/activity.Activity/index',
					params: {
						page: 1,
						limit: 9999,
					}
				}).then(res => {
					this.activity = res.list
					console.log(this.activity, 'this.activity')
					this.$loading().close()
				})
			},
			async getCate() {
				const data = await get({
					url: "/admin/basic.Village/cateIndex",
					loading: true,
					params: {
						page: 1,
						limit: 999,
					}
				});
				this.goodsTypeData = data.list;
			},
			onConfirm() {
				this.$refs.formRef.validate((valid) => {
					if (valid) {
						if ((this.formData.link_type == 1 || this.formData.link_type == 2|| this.formData.link_type == 3) && !this.formData
							.link_id) {
							this.$message('请选择要跳转的内容')
							return
						}
						// alert('submit!');
						this.$emit("search", this.formData);
						this.$parent.$emit("update:visible", false);
						this.$refs.formRef.resetFields()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			onCancel() {
				this.$parent.$emit("update:visible", false);
				this.$refs.formRef.resetFields();
			}
		}
	};
</script>